<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <!-- 引入 dtree 相关资源 -->
    <link rel="stylesheet" href="/js/lay-module/dtree/dtree.css">
    <link rel="stylesheet" href="/js/lay-module/dtree/font/dtreefont.css">
    <!-- 引入 font-aswsome 相关资源 -->
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form layui-form-pane" action="">
            <!-- 【用户名称】和【性别】 -->
            <div class="layui-form-item">
                <!-- 【用户名称】 -->
                <div class="layui-inline">
                    <label class="layui-form-label">用户名称<span style="color:red"> *</span></label>
                    <div class="layui-input-inline" style="width: 200px">
                        <input type="text" name="username" lay-verify="usernameVerify" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--【性别】-->
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 70px">性别</label>
                    <div class="layui-input-inline" style="width: 100px">
                        <select name="sex" lay-filter="userSexFilter">
                            <option value="0" selected="">保密</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 【邮箱账号】 -->
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱账号<span style="color:red"> *</span></label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" name="email" lay-verify="userEmailVerify" placeholder="请输入邮箱账号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">后台登录账号</div>
            </div>
            <!-- 【手机账号】 -->
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" name="phone" lay-verify="userPhoneVerify" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">后台登录账号</div>
            </div>
            <!-- 【登录密码】和【用户状态】 -->
            <div class="layui-form-item">
                <!-- 【登录密码】 -->
                <div class="layui-inline">
                    <label class="layui-form-label">登录密码<span style="color:red"> *</span></label>
                    <div class="layui-input-inline" style="width: 200px">
                        <input type="password" name="password" lay-verify="userPasswordVerify" placeholder="请输入用户登录密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width: 20px;margin-top:10px ">
                        <a href="javascript:void(0);" style="text-decoration:none;"><i id="show-password" class="fa fa-eye-slash"></i></a>
                    </div>
                </div>
                <!--【用户状态】-->
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 70px">状态</label>
                    <div class="layui-input-inline" style="width: 70px">
                        <select name="status" lay-filter="userStatusFilter">
                            <option value="1" selected="">正常</option>
                            <option value="0" style="color: red">禁用</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 【用户角色】  -->
            <div class="layui-form-item">
                <label class="layui-form-label">用户角色</label>
                <div class="layui-input-block" style="width: 300px">
                    <ul id="roleListForUser" class="dtree" data-id="-1"></ul>
                </div>
            </div>
            <!-- 【备注】 -->
            <div class="layui-form-item">
                <label class="layui-form-label">备　　注</label>
                <div class="layui-input-block">
                    <input type="text" name="remark" lay-verify="userRemarkVerify" placeholder="备注信息" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 提交按钮 -->
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="form-user-add">立即添加</button>
            </div>
        </form>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/lib/jsencrypt/jsencrypt.min.js" charset="utf-8"></script>
<script src="/lib/jsencrypt/rsa.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'dtree', 'iconPickerFa'], function () {
        let $ = layui.jquery;
        let form = layui.form,
            layer = layui.layer,
            dtree = layui.dtree;

        // 【用户角色】选择器：树状下拉角色选择器
        dtree.render({
            elem: "#roleListForUser",       // 绑定的菜单
            width: "100%",                  // 宽度百分百
            select: true,                   // 指定下拉树模式
            url: "/system/role/listForUser/0",   // 请求的URL
            none: "暂无角色",
            method: "GET",                  // 请求方式
            checkbar: true,                 // 设置复选框
            dataStyle: "layuiStyle",        // 使用layui风格的数据格式
            dataFormat: "list",             // 配置data的风格为list
            // 修改response中返回数据的定义，消息主键为msg，成功代码为200
            response: {
                message: "msg",
                statusCode: 200,
                checkArr: "checkArr",
                title: "name"
            },
            selectCardHeight: "200",        // 卡片高度
            ficon: ["1", "-1"],             // 修改一级图标样式（展开与否的按钮，最后一级不显示）
            icon: "2",                      // 修改二级图标样式
            // 点提交后，选中参数的隐藏form表单输入框名称
            selectInputName: {
                nodeId: "roleIds",         // 上级菜单的input的name
                context: "roleNames"
            }
        });

        // 显示明文密码与否
        $('#show-password').on('click', function () {
            if ($(this).hasClass('fa-eye-slash')) {
                $(this).removeClass('fa-eye-slash');
                $(this).addClass('fa-eye');
                $("input[name='password']").attr('type', 'text');
            } else {
                $(this).removeClass('fa-eye');
                $(this).addClass('fa-eye-slash');
                $("input[name='password']").attr('type', 'password');
            }
        });

        //自定义验证规则
        form.verify({
            // 用户姓名
            usernameVerify: function (value) {
                if (value.length <= 0) {
                    return '请输入角色名称！';
                }
            },
            // 邮箱
            userEmailVerify: function (value) {
                if (value.length <= 0) {
                    return '请输入用户邮箱！';
                }
                let pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g;
                if (!pattern.test(value)) {
                    return '邮箱格式错误！';
                }
            },
            // 手机号
            userPhoneVerify: function (value) {
                let pattern = /^(13[0-9]|14[5|7]|15[0-9]|18[0-9]|19[4|5])\d{8}$/g;
                if (value.length > 0 && !pattern.test(value)) {
                    return '手机号码格式错误！';
                }
            },
            // 密码
            userPasswordVerify: function (value) {
                if (value.length <= 0) {
                    return '请输入密码！';
                }
            },
        });

        //监听提交
        form.on('submit(form-user-add)', function (data) {
            // 密码加密
            let encrypt = new JSEncrypt()
            encrypt.setPublicKey(PUBLIC_KEY)
            data.field.password = encrypt.encrypt(data.field.password)
            // 加载层
            let index_loading = layer.load(1, {
                shade: [0.2, '#fff'] //0.1透明度的白色背景
            });
            // 发起 添加用户 请求
            $.post("/system/user/add", data.field, function (data) {
                // 关闭加载层
                layer.close(index_loading)
                if (data.code === 200) {
                    // 弹窗确认下一步操作
                    layer.open({
                        type: 0,
                        title: data.msg,
                        closeBtn: 0,        // 不显示右上角的关闭按钮
                        btn: ["继续添加", "关闭"],
                        content: '是否继续添加？',
                        // 【继续添加】按钮响应事件
                        btn1: function (index) {
                            layer.close(index)
                        },
                        // 【关闭】按钮响应事件
                        btn2: function (index) {
                            // 先得到当前iframe层的索引
                            let index2 = parent.layer.getFrameIndex(window.name);
                            // 关闭当前弹窗
                            parent.layer.close(index2);
                        }
                    });
                } else {
                    layer.alert(data.msg, {icon: 2});
                }
            });
            return false;
        });

        // 点击任何地方关闭下拉树
        $("body").on("click", function (event) {
            $("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
            $("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
        });

    });
</script>
</body>
</html>